<template>
  <div class="gou">
    <div class="zu-header">
      <div @click="handleNO">
        <span class="icon iconfont icon-zuo"></span>
      </div>
      <div>求购</div>
      <!-- <div class="geng">
        <span class="icon iconfont">&#xe639;</span>
        <span class="icon iconfont">&#xe60f;</span>
      </div> -->
      <span></span>
    </div>
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="value1"
        :options="option1"
        @change="changeSelects"
      />
      <van-dropdown-item
        v-model="value2"
        :options="option2"
        @change="changeSelect"
      />
    </van-dropdown-menu>
    <div class="zu-mian">
      <div class="zu-footer">
        <dl v-for="(item, index) in arr.length ? arr : list" :key="index">
          <ul>
            <li>
              <span class="icon iconfont icon-wode"></span>{{ item.name }}
            </li>
            <li>{{ item.img }}</li>
            <li>{{ item.times }}</li>
          </ul>
          <ol>
            <p class="p1">{{ item.title }}</p>
            <p class="p2">
              <span>
                <span>意向区域:{{ item.qu }}</span>
                <span
                  >意向价格: <span class="many">{{ item.jiage }}</span></span
                >
              </span>
              <span class="p3"
                ><button @click="handleMessage">
                  <span class="icon iconfont icon-ico_duanxin"></span></button
                ><button @click="handleIhpone"> 
                  <span class="icon iconfont">&#xe603;</span>
                </button></span
              >
            </p>
          </ol>
        </dl>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      name: "Gou",
      value1: 0,
      value2: "a",
      option1: [
        { text: "房产类型", value: 0 },
        { text: "高层住在", value: 1 },
        { text: "小高层住在", value: 2 },
        { text: "商铺/门面房", value: 3 },
        { text: "厂房", value: 4 },
        { text: "写字楼", value: 5 },
        { text: "独院/别墅", value: 6 },
        { text: "车库", value: 7 },
      ],
      option2: [
        { text: "区域选择", value: "a" },
        { text: "昌平区", value: "b" },
        { text: "丰台区", value: "c" },
        { text: "朝阳区", value: "d" },
      ],
      list: "",
      arr: [],
      qu: "",
      shi: "",
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    getlist() {
      axios.get("/qiugou").then((res) => {
        this.list = res.data.data;
        console.log(this.list);
      });
    },
    handleNO() {
      this.$router.push("/index");
    },
    handleMessage() {
      this.$router.push("/message");
    },
    handleIhpone() {
      this.$router.push("/ihpone");
    },
    changeSelect(val) {
      if (val === "b") {
        this.arr = this.list.filter((item) => item.qu === "昌平区");
      } else if (val === "c") {
        this.arr = this.list.filter((item) => item.qu === "丰台区");
      } else if (val === "d") {
        this.arr = this.list.filter((item) => item.qu === "朝阳区");
      } else {
        (this.arr = []), this.getlist();
      }
      console.log(val, "123333");
    },
    changeSelects(val) {
      if (val === 0) {
        this.arr = this.list.filter((item) => item.shi === "房产类型");
      } else if (val === 1) {
        this.arr = this.list.filter((item) => item.shi === "高层住宅");
      } else if (val === 2) {
        this.arr = this.list.filter((item) => item.shi === "小高层住宅");
      } else if (val === 3) {
        this.arr = this.list.filter((item) => item.shi === "商铺/门面房");
      } else if (val === 4) {
        this.arr = this.list.filter((item) => item.shi === "厂房");
      } else if (val === 5) {
        this.arr = this.list.filter((item) => item.shi === "写字楼");
      } else if (val === 6) {
        this.arr = this.list.filter((item) => item.shi === "独院/别墅");
      } else if (val === 7) {
        this.arr = this.list.filter((item) => item.shi === "车库");
      } else {
        (this.arr = []), this.getlist();
      }
    },
  },
};
</script>
<style scoped>
.gou {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.zu-mian {
  flex: 1;
  overflow-y: scroll;
}
.zu-footer ul {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  font-size: 15px;
}
.zu-footer ol {
  padding: 15px;
  border-bottom: 10px solid rgb(228, 225, 225);
}
.zu-footer ol p {
  padding: 10px 0;
}
.zu-footer ul span {
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 50%;
  background: rgba(224, 219, 219, 0.986);
}
.zu-footer ul li .iconfont {
  font-size: 20px;
}
.zu-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  height: 50px;
  font-size: 20px;
  background: rgb(6, 121, 230);
  align-items: center;
  color: #fff;
  position: sticky;
}
.zu-header .iconfont {
  font-size: 20px;
}
.geng {
  border: 1px solid #ccc;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
}
.geng span {
  padding: 3px 5px;
}
.p1 {
  border-bottom: 1px solid #ccc;
}
.p2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
}
.p3 button {
  background: rgb(240, 170, 170);
  border: none;
  padding: 5px;
  border-radius: 20px;
}
.p3 button .iconfont {
  color: red;
}
.many {
  color: orange;
}
</style>